<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子3</title>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="one1"></div>
        </div>
        <div class="box2">
            <div class="one1"></div>
        </div>
        <div class="box3">
            <div class="one1"></div>
        </div>
    </div>
    <div class="image">
        <img src="1.jpg">
    </div>
    <!-- <input type="color">
    <input type="month">
    <input type="date">
    <input type="number">
    <input type="week">
    <input type="datetime-local"> -->
</body>
<style>
    .image {
        width: 300px;
        height: 200px;
        transform: rotate(20deg);
        transform: skew(20deg);
        /* transform: scale(0.2); */
        transform: translate(200px, 30px);
        animation: move 1s linear infinite alternate ;
    }

    .image img {
        width: 100%;
        height: 100%;
    }

    @keyframes move {
        0% {
            transform: translateX(0px) rotate(120deg) scale(2);
            /* transform:;
            transform:; */
        }

        50% {
            transform: translateY(300px) scale(0.5) rotate(-180deg);
            /* transform:  */
            /* transform: rotate(-180deg); */
        }

        100% {
            transform: translateX(800px) scale(1.5) rotate(180deg);
            /* transform: scale(1.5); */
            /* transform: rotate(120deg); */
            /* opacity: 0; */
        }
    }


    .box {
        width: 100px;
        height: 100px;
        padding: 20px;
        background-color: rgb(218, 213, 213);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
    }

    .box1 {
        height: 33.33%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .box1 .one1 {
        width: 20px;
        height: 20px;
        background-color: rgba(25, 25, 178, 0.78);
        border-radius: 50%;
    }

    .box2 {
        height: 33.33%;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .box2 .one1 {
        width: 20px;
        height: 20px;
        background-color: rgba(25, 25, 178, 0.78);
        border-radius: 50%;
    }

    .box3 {
        height: 33.33%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .box3 .one1 {
        width: 20px;
        height: 20px;
        background-color: rgba(25, 25, 178, 0.78);
        border-radius: 50%;
    }
</style>

</html>